<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>main</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/photoswipe.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
		<link rel="stylesheet" type="text/css" href="css/main_R.css" />
		<link rel="stylesheet" type="text/css" href="Video/videohls/video.css">
		<style>
			
.mui-video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, .4);
	z-index: 1;
	height: 100%;
}
.mui-video-controls .mui-icon {
	color: white;
	float: right;
}
.mui-icon-bigbtn {
	position: absolute;
	font-size: 2.5em;
	height: 1.5em;
	width: 1.5em;
	border-radius: 1.5em;
	line-height: 1.4em;
	
	left: 50%;
	margin-left: -.75em;
	top: 50%;
	margin-top: -.75em;
	z-index: 9;
}
.mui-icon-bigbtn img{
	width: 100%;
	height: 100%
}
.video-js .vjs-time-control{display:block;}
			.video-js .vjs-remaining-time{display: none;}
			#mse{
				 width: 100% !important;
        		height: 28vh !important;
			}
			#mse video{
				width: 100%;
				height: 100%;
				object-fit: fill;
			}
			.xgplayer-error-text{
				color: #fff;
			}
			
		</style>
	</head>

	<body>
		<div id="datas" class="hui-wrap">
			<div class="topHeight"></div>

			<div class="info_nav">
				<span class="hui-icons hui-icons-menu" onclick="showMenu()" style=""></span>
				<h2 class="base_name" style=""></h2>
				<div class="user_head" style="" onclick="openSetting()">
					<img src="img/head_icon.png" alt="" style="" />
				</div>
			</div>
			
			<div class="topBanner" style="">
				<div id="swipe_Con" style="">
					<div class="swiper-container" style="">
					    <div class="swiper-wrapper"> 
					        
					    </div>
					    
					</div>
				</div>
				<div id="video_Con" style="">
					<div id="mse"></div>
					<!--<img id="play_Button" src="img/play_button.png" alt="" />
					<img id="video_Cover" src="img/videoFile.png" alt="" />-->
					
					<!--<video id="my-video" class="video-js vjs-default-skin" controls preload></video>-->
					
					<!--<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
	    
					</video>-->
					<!--<div class="mui-video-controls" id="videobg">
						<img id="video_Cover" src="img/videoFile.png" alt="" />
						<span class="mui-icon iconfont icon-bofang mui-icon-bigbtn" id="videoplay">
							
							<img id="play_Button" src="img/play_button.png" alt="" />
						</span>
					</div>-->
					
				</div>
				<section class="ImgVideoTab" style="">
					<span class="Video_Button">视　频</span>
					<span class="Img_Button active">图　片</span>
					
				</section>
				<span class="ImgNum"><span class="ImgIndex">1</span> / <span class="ImgTotal">4</span></span>
			</div>
			
			
			<!---->
			
			<div class="base_index" style="">

				<div class="base_index_container" style="">
					<ul class="base_index_list" style="">
						<li v-for="detail in list" @click="onDetailSelected(detail)" style="">

							<div class="base_index_name" style="">
								<p class="name" v-html="HandleName(detail.TargetName)" style=""></p>
								<p style="color: #606060;height: 25%; padding: 8px 0 0 0;" v-html="HandleName2(detail.TargetName)"></p>
								<p class="unit" v-text="getValue(detail)" style=""></p>
							</div>

							<div class="base_index_icon" style="">
								<img :src="getIcon(detail)" alt="" style="" />
							</div>
							<div :class="getErrorTips(detail.State)" style="">
								<p style="">指标数据异常</p>
							</div>
						</li>
						<li style=""></li>
					</ul> 
				</div>
				<div class="sureserve" style="">sensor@sureserve.cn</div>
			</div>

			<!--侧边菜单栏-->
			<div class="hui-slide-menu" style="">
				<ul>
					<li v-for="(column,index) in getFilterColumn()" v-if="column.display==1" style="">
						<div :class="getLeftClass(index,column.Id,column.Name)" @click="onColumnSelected(column,index)">
							<div :class="getStateBGC(column.State)"></div>
							<b v-html="getState(column.State)" :class="getStateBGC(column.State)"></b>
							<p style="">{{column.Name}}</p>
						</div>
					</li>
					<li style="height: 22px;"></li>
				</ul>
			</div>
			<div id="mask" style="display: none;" onclick="hideMenu()"></div>
		</div>
		
		
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
		    <div class="pswp__bg"></div>
		    <div class="pswp__scroll-wrap">
		        <div class="pswp__container" style="overflow:visible;">
		            <div class="pswp__item"></div>
		            <div class="pswp__item"></div>
		            <div class="pswp__item"></div>
		        </div>
		        <div class="pswp__ui pswp__ui--hidden">
		            <div class="pswp__top-bar">
		                <div class="pswp__counter"></div>
		                <button class="pswp__button pswp__button--close" title="关闭"></button>
		                <div class="pswp__preloader">
		                    <div class="pswp__preloader__icn">
		                      <div class="pswp__preloader__cut">
		                        <div class="pswp__preloader__donut"></div>
		                      </div>
		                    </div>
		                </div>
		            </div>
		            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
		                <div class="pswp__share-tooltip"></div> 
		            </div>
		            <div class="pswp__caption">
		                <div class="pswp__caption__center"></div>
		            </div>
		        </div>
		    </div>
		</div>
		
		
		<script src="js/func/hui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/photoswipe.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/my.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/update.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="demoJS/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="demoJS/index-hls.js" type="text/javascript" charset="utf-8"></script>
		
		
		<script type="text/javascript">
			
			function showMenu() {
				hui('.hui-slide-menu').css({
					display: 'block',
					top: '20px'
				});
				hui('#mask').css({
					display: 'block'
				});
			}
			
			function hideMenu() {
				hui('.hui-slide-menu').css({
					display: 'none'
				});
				hui('#mask').css({
					display: 'none'
				});
			}

			//刷新主界面
			function refresh() {
				printLog("主界面开始刷新");
				datas.userInfo = getUserInfo();	
				getColumns();
			}
			//刷新网管列表
			function refreshColumns() {
				printLog("刷新网关列表");
				getColumns();
			}
			var mySwiper
			var SwiperNum = 1;
			function initSwiper(){
				mySwiper = new Swiper('.swiper-container', {
					
					loop : false,
					pagination: {
				        el: '.swiper-pagination',
			        },
			        noSwiping : true,
			        on: {
					    slideChangeTransitionEnd: function(){
					      //alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
					      hui('.ImgIndex').html(this.activeIndex + 1);
					    },
					},
				})
				SwiperNum++;
			}
			
			hui.ready(function() {
				//轮播图控制
				initSwiper();
			
				//默认第一次调用基地数据请求 
				getColumns();
				hui.plusReady(function(){
					checkUpdate(true);
				})
				
			})
			var myPlayer, IsPlay = true;
			var datas = new Vue({
				el: '#datas',
				data: {
					userInfo: getUserInfo(),
					columns: [],
					list: [],
					ImgContainer: [],
					VideoContainer: [],
					selectListIndex: 0,
				},
				methods: {
					//选中左侧基地
					onColumnSelected: function(column, index) {
						this.selectListIndex = index;
						getSensorList(column);
					},
					//左侧基地选中class
					getLeftClass: function(index, columnId, columnName) {
						if(this.selectListIndex == index) {
							console.log("左边列表选中666:" + index);
							Sensor_Base = columnId;
							Sensor_Name = columnName;
							console.log("左边列表选中Id:" + Sensor_Base);
							console.log("左边列表选中的基地名字是:" + Sensor_Name);
							hideMenu(); 
							hui('.base_name').html(Sensor_Name)
						}
						return index == this.selectListIndex ? "column_div selected" : "column_div";
					},
					getState: function(state){
						return state == 0 ? "正常" : state == -1 ? "缺电" : state == 1 ? "延时" : state;
					},
					getStateBGC: function(state){
						return state == 0 ? "cur0" : state == -1 ? "cur-1" : state == 1 ? "cur1" : state;
					},
					getErrorTips: function(state){
						return state == 0 ? "errorTips" : "errorTips block";
					},
					//过滤掉不要显示 display不为1的基地
					getFilterColumn: function() {
						return this.columns.filter(function(column) {
							var fistC = column.display == 1;
							return fistC;
						});

					},
					HandleName: function(name) {
						
						if(name == '土壤PH'){
							return name
						}
						if(name != '土壤PH'){
							var reg = /[\u4e00-\u9fa5]/g;
							var chinaName = name.match(reg).join("");
							return chinaName
						}
					},
					HandleName2: function(name) {
						
						if(name == '土壤PH'){
							//return name
						}
						if(name != '土壤PH'){
							var reg = /[\u4e00-\u9fa5]/g;
							var chinaName = name.replace(reg, "");
							
							return chinaName
						}
					},
					onDetailSelected: function(detail) {
						var url = "main_Detail.html?sid=" + detail.Id;
						url += "&tid=" + detail.TargetId;
						url += "&data=" + getFloat(format(detail.MeasureData,'0'),3);
						url += "&name=" + detail.TargetName;
						url += "&unit=" + detail.TargetUnit;
						url += "&base=" + Sensor_Base;
						url += "&sensorN=" + Sensor_Name;
						console.log(url);
						hui.open(encodeURI(url), {}, true, {});
					},
					// 获取头像
					getHead: function() {
						console.log('header:' + JSON.stringify(this.userInfo));
						var avatar = ""
						if(this.userInfo && this.userInfo.avatar) {
							avatar = baseURL() + this.userInfo.avatar;
						} else {
							avatar = "img/head_icon.png";
						}
						return avatar;
					},
					//获得右侧指标图标
					getIcon: function(column) {
						var type = column.TargetName;
						var icon = getIconByTarget(type);

						return icon;
					},
					getValue: function(detail) {
						var tmp = format(detail.MeasureData, '0');
						var type = detail.TargetName;
						return getFloat(tmp, 3) + detail.TargetUnit;
					},
				}
			})
			
			
			
			
			function openSetting() {
				
				hui.open("account.html", {}, true, {});
			}

			//基地数据请求
			function getColumns() {
				var userId = getUserId();
				
				var url = baseURL() + "/gateway_handler.ashx?action=gateway_user"; 
//				var url = 'http://124.232.165.110:38081/interfaces/gateway_handler.ashx?action=gateway_user';		    
				
				var param = {
					uid: userId
				};
				postJson(url, param, function(ret) {
					console.log('----' + JSON.stringify(ret));
					//printLog(ret, "栏目");
					datas.columns = ret.data;
					
					localStorage.setItem("columns", JSON.stringify(datas.columns));
					SwiperNum = 1;
					if(ret.data.length > 0) {
						var showFirst = false;
						for(var i = 0; i < ret.data.length; i++) {
							var d = ret.data[i];
							if(d.display == 1 && !showFirst) {
								showFirst = true;
								getSensorList(d);
							}
						}

						setTimeout(function() {
							datas.selectListIndex = 0;
						}, 500)
						
					}
				});
			}

			//指标数据请求
			var video, output;
			function getSensorList(column) {
				
				
				buttonIF(column.Video, column.Albums, column.VideoImg, column.SerialNo, column.ChannelNo);//调用控制图片及视屏显示方法
					
				var columnId = column.Id;
				var timestamp=new Date().getTime();
				var url = baseURL() + "/gateway_handler.ashx?action=gateway_target";
				console.log(url);
				var param = {
					gid: columnId, 
					timestamp:timestamp, 
				};
				
				console.log(JSON.stringify(param));
				datas.list = [];
				printLog(param);
				postJson(url, param, function(ret) {
					printLog(ret, "传感器");
					setTimeout(function() {
						datas.list = ret.data;
					}, 500);
				}, function(e) {
					
				});
			}
			
			$('.Video_Button').on('click', function(){
				$(this).show().addClass('active').siblings('span').removeClass('active');
				$('#swipe_Con').hide();
				$('.ImgNum').hide();
				$('#video_Con').show();
			})
			$('.Img_Button').on('click', function(){
				$(this).show().addClass('active').siblings('span').removeClass('active');
				$('#video_Con').hide();
				$('#swipe_Con').show();
				$('.ImgNum').show();
			})
			//视屏及图片显示控制方法
			function buttonIF(Video, Img, VideoImg, SerialNo, ChannelNo){
				
				if((Img == null || Img == '') && (Video == null || Video == '')){
					hui('.ImgIndex').html(1);
					//无图片 无视频
					$('#video_Con').hide();
					$('#swipe_Con').show();
					$('.ImgNum').show();
					$('.Video_Button').hide().removeClass('active');
					$('.Img_Button').show().addClass('active');
					mySwiper.removeAllSlides();//删除所有已存在的slide 重新添加
					
					for(var i=0; i<3;i++){ 
						mySwiper.addSlide(i,'<div class="swiper-slide"><img src="img/banner0'+ (i+1) +'.png"></div>'); //在index为1的位置插入一个slide
						
					}
					ImgPreview();
					
				}else if((Img == null || Img == '') && (Video != null || Video != '')){
					//无图片 有视频
					$('#swipe_Con').hide();
					$('#video_Con').show();
					$('.ImgNum').hide();
					$('.Video_Button').show().addClass('active');
					$('.Img_Button').hide().removeClass('active');
					
					//添加视频
					VideoIf(Video, VideoImg, SerialNo, ChannelNo);
					
				}else if((Img != null || Img != '') && (Video == null || Video == '')){
					//有图片 无视频
					$('#video_Con').hide();
					$('#swipe_Con').show();
					$('.ImgNum').show();
					$('.Video_Button').hide().removeClass('active');
					$('.Img_Button').show().addClass('active');
					
					//添加图片
					ImgIf(Img);
					
				}else if((Img != null || Img != '') && (Video != null || Video != '')){
					//有图片 有视频
					$('#swipe_Con').hide();
					$('#video_Con').show();
					$('.ImgNum').hide();
					$('.Video_Button').show().addClass('active');
					$('.Img_Button').show().removeClass('active');
					
					//添加视频
					VideoIf(Video, VideoImg, SerialNo, ChannelNo);
					
					//添加图片
					ImgIf(Img);
					
				}
				
				
			}
			//添加图片方法
			function ImgIf(Img){
				hui('.ImgIndex').html(1);
				//添加图片
				var imgURL = Img.split('|'),imgHtml = '';
				mySwiper.removeAllSlides();//删除所有已存在的slide 重新添加
				//循环添加slide
				for(var i=0; i<imgURL.length;i++){ 
					console.log('----' + baseResURL() + imgURL[i]);
					mySwiper.addSlide(i,'<div class="swiper-slide"><img src="' +  baseResURL() + imgURL[i] + '"></div>'); //在index为1的位置插入一个slide
				}
				//
				
				hui('.ImgTotal').html(imgURL.length);
				ImgPreview();
				
			}
			//添加视频方法
			function VideoIf(Video, VideoImg, SerialNo, ChannelNo){
				//添加视频
				var player = new HlsJsPlayer({
		          	"id": "mse",
		          	"url": Video,
		          	"playsinline": false,
//		          	"autoplay": true,
		          	"volume": 0,
		          	"isLive": true,
		          	"poster": baseResURL()+VideoImg,
		          	"closeVideoTouch": false,
		          	"x5-video-orientation": "landscape",
		          	"x5-video-player-fullscreen": "false",
		        });
		        player.on('requestFullscreen',function(){
		            //事件名称可以在上述查询
		            alert('进入全屏');
		        })
		        player.on('exitFullscreen',function(){
		            //事件名称可以在上述查询
		            alert('退出全屏');
		        })
				/*$('#video_Cover').attr('src',baseResURL()+VideoImg);
				$('#play_Button').on('click', function(){
					
					localStorage.setItem('videoUrl', Video);
					localStorage.setItem('videoImg', VideoImg);
					localStorage.setItem('SerialNo', SerialNo);
					localStorage.setItem('ChannelNo', ChannelNo);
					hui.open('video_text.html', {}, true, {});
				})*/
				
			}
			
			var huibackNum = 0;
				hui.Back = function() {
					if(huibackNum < 1) {
						hui.toast('再按一次退出程序');
						huibackNum++;
						setTimeout(function() {
							huibackNum = 0;
						}, 3000);
					} else {
						plus.runtime.quit();
					}
				}
			
		</script>
		
		<script type="text/javascript">
			function ImgPreview(){
				setTimeout(function() {
					var objs = $(".swiper-container img");     
					     
				    for(var i=0;i<objs.length;i++)  
				    {  
					     objs[i].onclick=function()  
					     {  
							 var index = i;
							 previewImg(index);
					     }  
				    }  
					function previewImg(index){
						var pswpElement = document.querySelectorAll('.pswp')[0];
						var items = [];
						//获取图片数据并填充近数组
						var objs = $(".swiper-container img");             
				        for(var i=0;i<objs.length;i++)  
				        {  
							var eimg =  objs[i];
				            var imgObj = {src:eimg.getAttribute('src'), w:eimg.naturalWidth, h:eimg.naturalHeight};
							items.push(imgObj);
				        }  
						var options = {index: index};
						var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
						gallery.init();
					}
				},1500);
			}
			
		
		</script>
		
	</body>

</html>